<template>
    <div style="margin-top: 50px">
        <!--客户标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">客户管理</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="100%"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="客户名称"
                                width="280">
                        </el-table-column>
                        <el-table-column
                                property="person"
                                label="负责人"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                property="scope"
                                label="经营范围"
                                width="280">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
                <div style="margin-top: 100px">
                    <el-button type="success" @click="addShow">添加客户</el-button>
                    <el-button type="success" @click="updateShow">修改客户信息</el-button>
                    <el-button type="success" @click="queryShow">查看客户信息</el-button>
                </div>
            </div></el-col>

            <el-col :span="10"><div class="grid-content bg-purple-light">
                <el-card class="box-card">
                    <span>查询客户信息</span><br>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                        <el-form-item label="客户名">
                            <el-input v-model="customName"></el-input>
                        </el-form-item>
                        <el-form-item label="经营范围">
                            <el-input v-model="manageScope"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-card>
            </div></el-col>
        </el-row>

        <!--添加客户弹框-->
        <el-dialog
                title="添加客户信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="客户名称">
                    <el-input v-model="custom"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="person"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话">
                    <el-input v-model="phone"></el-input>
                </el-form-item>
                <el-form-item label="办公地址">
                    <el-input v-model="address"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="email"></el-input>
                </el-form-item>
                <el-form-item label="经营范围">
                    <el-input v-model="scope"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="add">添加</el-button>
        </el-dialog>

        <!--修改客户弹框-->
        <el-dialog
                title="修改客户信息"
                :visible.sync="updateCustom"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="客户名称:">
                    <span>{{UCustom}}</span>
                </el-form-item>
                <el-form-item label="负责人:">
                    <el-input v-model="UPerson"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话:">
                    <el-input v-model="UPhone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:">
                    <span>{{UEmail}}</span>
                </el-form-item>
                <el-form-item label="办公地址:">
                    <span>{{UAddress}}</span>
                </el-form-item>
                <el-form-item label="经营范围:">
                    <el-input v-model="UScope"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="update">修改</el-button>
        </el-dialog>

        <!--查看客户弹框-->
        <el-dialog
                title="查看客户信息"
                :visible.sync="queryCustom"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="客户名称:">
                    <span>{{UCustom}}</span>
                </el-form-item>
                <el-form-item label="负责人:">
                    <span>{{UPerson}}</span>
                </el-form-item>
                <el-form-item label="负责人电话:">
                    <span>{{UPhone}}</span>
                </el-form-item>
                <el-form-item label="客户地址:">
                    <span>{{UAddress}}</span>
                </el-form-item>
                <el-form-item label="邮箱:">
                    <span>{{UEmail}}</span>
                </el-form-item>
                <el-form-item label="经营范围:">
                    <span>{{UScope}}</span>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Custom",
        data(){
            return{
                //分页数据
                tableData:"",
                currentPage:1,
                pageSize:3,
                total: 50,
                //动态查询
                customName:"",
                manageScope:"",
                //添加页面
                dialogVisible:false,
                custom: "",
                person:"",
                phone:"",
                address:"",
                email:"",
                scope:"",
                //修改页面
                updateCustom:false,
                UId:"",
                UCustom: "",
                UPerson:"",
                UPhone:"",
                UEmail:"",
                UAddress:"",
                UScope:"",
                //查询供应商页面
                queryCustom: false,
            }
        },
        mounted() {
         this.init()
        },
        methods:{
            handleCurrentChange(val){
                this.UId = val.id;
                this.UCustom = val.name;
                this.UPerson = val.person;
                this.UPhone = val.phone;
                this.UAddress = val.address;
                this.UEmail = val.email;
                this.UScope = val.scope
            },
            //初始化客户信息
            init(){
                let a = "1";
                let b = "1";
                if (this.customName != ''){
                    a = this.customName
                }if (this.manageScope != ''){
                    b = this.manageScope
                }
                let url = "jxc/custom/findPageAndItem/"+this.currentPage+"/"+
                    this.pageSize+"/"+a+"/"+b;

                this.axios.get(url).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total
                    }
                )
            },
            query(){
                this.currentPage = 1;
                this.init();
            },
            //当前页发生变化的时候触发事件
            change(currentPage){
                console.log(currentPage);
                this.currentPage = currentPage;
                this.init()
            },
            //显示添加页面
            addShow(){
                this.dialogVisible = true
            },
            //添加客户
            add(){
                let data = new FormData();
                data.append("name",this.custom);
                data.append("person",this.person);
                data.append("phone",this.phone);
                data.append("address",this.address);
                data.append("email",this.email);
                data.append("scope",this.scope);
                this.axios.post("jxc/custom/add",data).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '添加失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                    }
                );
                this.dialogVisible = false;
                this.custom = "";
                this.person ="";
                this.phone ="";
                this.address ="";
                this.email ="";
                this.scope ="";
                this.init();
            },
            //显示修改页面
            updateShow(){
                this.updateCustom = true;
            },
            //修改客户信息
            update(){
                let data = new FormData();
                data.append("id",this.UId);
                data.append("person",this.UPerson);
                data.append("phone",this.UPhone);
                data.append("scope",this.UScope);
                this.axios.put("jxc/custom/update",data).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                        this.updateCustom = false;
                        this.query();
                    }
                );
            },
            //查看客户信息
            queryShow(){
                this.queryCustom = true;
            },

        }
    }
</script>

<style scoped>

</style>